<template>
    <div id="demo" class="container-fluid">
        <div class="row">
            <!-- 遮罩层 -->
            <div class="col-sm-3">
                <div style="margin-top:20px;">
                    
                </div>
                <div>
                    <h2>批量处理图片</h2>
                    <p>当前文件夹下共有{{fileslen}}张图片</p>
                    <p>还有{{renums}}张未处理</p>
                </div>
                <div>
                    <select id="imagedir" multiple class="form-control" @change="dirchange(this)">
                        <option v-for="item in imagedir" :value=item>
                            {{item}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="col-sm-4">
                <div>
                    <img id="image" :src="url" alt="Picture">
                </div>
            </div>
            <div class="col-sm-2">
                <div id="operator">
                    <div id="yulan"></div>
                    <div id="bset">
                        <button type="button" id="button" @click="crop">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="prefiximages" class="row">
            <div class="col-sm-2 imagediv" v-for="item in imageslist " @click="imageselect($event)">
                <img class="preloadimg" :src=item>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript"> 
import Cropper from 'cropperjs'
export default {
    components: {

    },
    data() {
        return {
            renums:0,
            selectedIndex:0,
            fileslen:0,
            headerImage: '../../static/imgs/icon.png',
            imageslist: ['./../static/imgs/2e5a84ba3e859cdfef0c94ceafd38bac247bc5bb.jpg', './../static/imgs/2e5a84ba3e859cdfef0c94ceafd38bac247bc5bb.jpg'],
            imagedir: [],
            filedir: '',
            pageno: 1,
            picValue: '',
            cropper: '',
            croppable: true,
            panel: false,
            url: '../../static/imgs/icon.png'
        }
    },
    watch: {
    imageslist: function (val) {
    var vm=this;
     vm.selectedIndex=-1;

     var a=$('#prefiximages div:eq(0) img').get(0);
     a.src=val[0];
     vm.selectNextImage();
      
    }},
    mounted() {
        //初始化这个裁剪框  
        var self = this;
        var image = document.getElementById('image');
        this.cropper = new Cropper(image, {
            preview: "#yulan",
            aspectRatio: 1,
            viewMode: 1,
            autoCropArea: 0.8,
            background: false,
            zoomable: false,
            ready: function() {
                self.croppable = true;
            }
        });
        this.loaddirselect('');
    },
    methods: {
        resetselect(){
          var vm=this;
             $('#prefiximages div').removeClass('imgselect');
              var temp = $('#prefiximages div').get(vm.selectedIndex);
              temp.className = 'col-sm-2 imagediv imgselect';
              var url=$('.col-sm-2.imagediv.imgselect').children('img').attr('src');
              
              this.change(url);

        },
        selectNextImage()
        { var vm=this;
       
         var  len=$('#prefiximages').children('div').length;
         if(vm.selectedIndex==len-1&&vm.renums<=0){
         alert("没有待处理的图片!");
         return;
         }
          if(vm.selectedIndex==len-1){
          vm.pageno++;
              this.loadimages('');
              
          }
          else{
              
              vm.selectedIndex++;
              vm.resetselect();
          }
              


        },
        confirm(data) {
            var vm = this
            $.ajax({
                url: 'http://localhost:3000/uploadimage',
                type: 'POST',
                data: data,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                error: function(returndata) {
                    alert(returndata);
                },
                success: function(returndata) {
                    
                }
            });
        },
        imageselect: function(e) {
            $('#prefiximages div').removeClass('imgselect');
            var temp = e.currentTarget;
            temp.className = 'col-sm-2 imagediv imgselect';
            var url=$('.col-sm-2.imagediv.imgselect').children('img').attr('src');
            
            this.change(url);

           
        },
        dirchange(data) {
           var vm=this;
            var v = $('#imagedir').val();
            
            vm.filedir = v[0];
            vm.pageno=1;
            this.loadimages('');

        },

        loaddirselect(data) {
            var vm = this;
            $.ajax({
                url: 'http://localhost:3000/getdir',
                type: 'GET',
                data: {},
                dataType:"json", 
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                error: function(returndata) {
                    alert('error');
                },
                success: function(returndata) {
                    vm.renums=100;
                    
                    vm.imagedir=returndata;
                    vm.filedir='adf'
                }
            });
        },
        loadimages(data) {
            var vm = this;
            $.ajax({
                url: 'http://localhost:3000/getfiles',
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                dataType:"json",
                data:JSON.stringify({
                    pageno: vm.pageno,
                    file: vm.filedir
                }),
                error: function(returndata) {
                    alert('error');
                },
                success: function(returndata) {
                   
                    vm.fileslen=returndata.len;
                    vm.renums=returndata.renums;
                     vm.imageslist = returndata.data;
                   
                }

            });
        },
        getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic  
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)  
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome  
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        change(url) {
           // let files = e.target.files || e.dataTransfer.files;
            //if (!files.length) return;
            //this.panel = true;
            //this.picValue = files[0];

            //this.url = this.getObjectURL(this.picValue);
            this.url=url;
            //每次替换图片要重新得到新的url  
            if (this.cropper) {
                this.cropper.replace(this.url);
            }
            this.panel = true;

        },
        crop() {
            this.panel = false;
            var croppedCanvas;
            var roundedCanvas;

            if (!this.croppable) {
                return;
            }
            // Crop  
            croppedCanvas = this.cropper.getCroppedCanvas();
            this.headerImage = croppedCanvas.toDataURL();
            var blob = this.dataURLtoBlob(this.headerImage);
            this.postImg(blob);

        },
         dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        },
        getRoundedCanvas(sourceCanvas) {
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            var width = sourceCanvas.width;
            var height = sourceCanvas.height;
            canvas.width = width;
            canvas.height = height;
            context.imageSmoothingEnabled = true;
            context.drawImage(sourceCanvas, 0, 0, width, height);
            context.globalCompositeOperation = 'destination-in';
            context.beginPath();
            context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
            context.fill();
            return canvas;
        },

        postImg(blob) {
            //这边写图片的上传  
            var vm = this;
            var fd = new FormData();
            fd.append("avatar", blob, "image.png");

            fd.append("tofile",vm.filedir);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:3000/upload', true);
            xhr.send(fd);
            this.selectNextImage();
        }
    }
}
</script>
<style>
* {
    margin: 0;
    padding: 0;
}

#prefiximages {
  margin-top: 20px;
}

#bset {
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin-bottom: 10px;
}

.col-sm-2 {
  padding-left: 0px;
  padding-right: 0px;
}

.preloadimg {
    width: 100%;
    height: 100%;
}
.imagediv {

    margin-left: 20px;
    width: 150px;
    height:150px;
}
.imgselect {
    border: 3px solid #39f
}

#demo {
    overflow: hidden;
}

#operator {
    padding-left: -15px;
    padding-right: -15px;
    width: 100%;
    height: 500px;
    border: 1px solid #39f
}

#demo #button {
    margin-left: 50px;
    background-color: #39f;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 700;
    height: 36px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    width: 50%;
}

#demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#demo #image {
    width: 500px;
    height: 500px;
}

#demo #imagec {
    width: 100px;
    height: 100px;
}

#demo #yulan {
    border: 1px solid #39f;
    margin-top: 20px;
    margin-left: 50px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    margin:10px auto;
}

.cropper-view-box,
.cropper-face {
    border-radius: 0%;
}

.cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
}

.cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cropper-wrap-box {
    overflow: hidden;
}

.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}

.cropper-modal {
    opacity: .5;
    background-color: #000;
}

.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
}

.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
}

.cropper-center:before,
.cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
}

.cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
}

.cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
}

.cropper-face,
.cropper-line,
.cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
}

.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
}

.cropper-line {
    background-color: #39f
}

.cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
}

.cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
}

.cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
}

.cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
}

.cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
    background-color: #39f
}

.cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
}

.cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
}

.cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
}

.cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
}

.cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
}

.cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
}

.cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
}

.cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        width: 15px;
        height: 15px
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        width: 10px;
        height: 10px
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        width: 5px;
        height: 5px;
        opacity: .75
    }
}

.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-image: url('');
}

.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}
</style>
